<template>
  <div class="JNPF-common-layout">
    <div class="JNPF-common-layout-center">
      <div class="JNPF-common-layout-main JNPF-flex-main">
        <div class="JNPF-common-head">
          <div>
            <el-button v-has="'btn_add'" type="primary" icon="el-icon-plus" @click="addOrUpdateHandle()">新增
            </el-button>
          </div>
          <div class="JNPF-common-head-right">
            <el-tooltip content="高级查询" placement="top" v-if="true">
              <el-link icon="icon-ym icon-ym-filter JNPF-common-head-icon" :underline="false"
                @click="openSuperQuery()" />
            </el-tooltip>
            <el-tooltip effect="dark" :content="$t('common.refresh')" placement="top">
              <el-link icon="icon-ym icon-ym-Refresh JNPF-common-head-icon" :underline="false" @click="initData()" />
            </el-tooltip>
          </div>
        </div>
        <JNPF-table v-loading="listLoading" :data="list" @sort-change='sortChange' :span-method="arraySpanMethod">
          <el-table-column prop="sortcode_name" label="排序" align="left" />
          <el-table-column prop="rotatetitle_name" label="轮播图标题" align="left" :show-overflow-tooltip="true" />
          <el-table-column prop="rotatetype_name" label="轮播类型" align="left" />
          <el-table-column prop="picture" label="商品图片" align="left">
            <template slot-scope="scope">
              <el-image v-if="scope.row.url" :src="define.comUrl+scope.row.url" class="el-upload-list__item-thumbnail"></el-image>
            </template>
          </el-table-column>
          <el-table-column prop="linktype_name" label="链接类型" align="left" />
          <el-table-column prop="linkurl_name" label="链接地址" align="left" :show-overflow-tooltip="true" />
          <el-table-column prop="description_name" label="描述" align="left" :show-overflow-tooltip="true" />
          <el-table-column label="操作" fixed="right" width="150">
            <template slot-scope="scope">
              <el-button v-has="'btn_edit'" type="text" @click="addOrUpdateHandle(scope.row.id)">编辑
              </el-button>
              <el-button v-has="'btn_remove'" type="text" class="JNPF-table-delBtn" @click="handleDel(scope.row.id)">删除
              </el-button>
            </template>
          </el-table-column>
        </JNPF-table>
        <pagination :total="total" :page.sync="listQuery.currentPage" :limit.sync="listQuery.pageSize"
          @pagination="initData" />
      </div>
    </div>
    <JNPF-Form v-if="formVisible" ref="JNPFForm" @refresh="refresh" />
  </div>
</template>
<script>
  import request from '@/utils/request'
  import {
    getDictionaryDataSelector
  } from '@/api/systemData/dictionary'
  import JNPFForm from './Form'
  import {
    getDataInterfaceRes
  } from '@/api/systemData/dataInterface'
  export default {
    components: {
      JNPFForm,
    },
    data() {
      return {
        expandObj: {},
        columnOptions: [],
        mergeList: [],
        detailVisible: false,
        query: {},
        treeProps: {
          children: 'children',
          label: 'fullName',
          value: 'id'
        },
        list: [],
        listLoading: true,
        total: 0,
        listQuery: {
          currentPage: 1,
          pageSize: 20,
          sort: "desc",
          sidx: "",
        },
        formVisible: false,
        rotatetypeOptions: [],
        rotatetypeProps: {
          "label": "fullName",
          "value": "enCode"
        },
        linktypeOptions: [],
        linktypeProps: {
          "label": "fullName",
          "value": "enCode"
        },
      }
    },
    computed: {
      menuId() {
        return this.$route.meta.modelId || ''
      }
    },
    created() {
        this.initData()
    },
    methods: {
      arraySpanMethod({
        column
      }) {
        for (let i = 0; i < this.mergeList.length; i++) {
          if (column.property == this.mergeList[i].prop) {
            return [this.mergeList[i].rowspan, this.mergeList[i].colspan]
          }
        }
      },
      getMergeList(list) {
        let newList = JSON.parse(JSON.stringify(list))
        newList.forEach(item => {
          if (item.children && item.children.length) {
            let child = {
              prop: item.prop + '-child-first'
            }
            item.children.unshift(child)
          }
        })
        newList.forEach(item => {
          if (item.children && item.children.length) {
            item.children.forEach((child, index) => {
              if (index == 0) {
                this.mergeList.push({
                  prop: child.prop,
                  rowspan: 1,
                  colspan: item.children.length
                })
              } else {
                this.mergeList.push({
                  prop: child.prop,
                  rowspan: 0,
                  colspan: 0
                })
              }
            })
          } else {
            this.mergeList.push({
              prop: item.prop,
              rowspan: 1,
              colspan: 1
            })
          }
        })
      },
      getExportList(list) {
        let exportList = []
        for (let i = 0; i < list.length; i++) {
          if (list[i].jnpfKey === 'table') {
            for (let j = 0; j < list[i].children.length; j++) {
              exportList.push(list[i].children[j])
            }
          } else {
            exportList.push(list[i])
          }
        }
        this.exportList = exportList
      },
      sortChange({
        column,
        prop,
        order
      }) {
        this.listQuery.sort = order == 'ascending' ? 'asc' : 'desc'
        this.listQuery.sidx = !order ? '' : prop
        this.initData()
      },
      initData() {
        this.listLoading = true;
        let _query = {
          ...this.listQuery,
          ...this.query,
          keyword: this.keyword,
          dataType: 0,
          menuId: this.menuId
        };
        request({
          url: `/api/zgyf/RotatePicture/getList`,
          method: 'post',
          data: _query
        }).then(res => {
          res.data.list.forEach(item=>{
            if(JSON.parse(item.picture)[0]){
              item.url = JSON.parse(item.picture)[0].url
            }
          })
          this.list = JSON.parse(JSON.stringify(res.data.list))
          this.total = res.data.pagination.total
          this.listLoading = false
        }).catch(()=>{
          this.listLoading = false
        })
      },
      handleDel(id) {
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          type: 'warning'
        }).then(() => {
          request({
            url: `/api/zgyf/RotatePicture/${id}`,
            method: 'DELETE'
          }).then(res => {
            this.$message({
              type: 'success',
              message: res.msg,
              onClose: () => {
                this.initData()
              }
            });
          })
        }).catch(() => {});
      },
      openSuperQuery() {
        this.superQueryVisible = true
        this.$nextTick(() => {
          this.$refs.SuperQuery.init()
        })
      },
      addOrUpdateHandle(id, isDetail) {
        this.formVisible = true
        this.$nextTick(() => {
          this.$refs.JNPFForm.init(id, isDetail)
          this.initData()
        })
      },
      refresh(isrRefresh) {
        this.formVisible = false
        if (isrRefresh) this.reset()
      },
      reset() {
        for (let key in this.query) {
          this.query[key] = undefined
        }
        this.search()
      }
    }
  }
</script>
<style>
.el-tooltip__popper{
  max-width:15%
}
</style>
